% rebase('layout.tpl', title=title, year=year, jsfiles=['jquery-1.10.2.min.js', 'vue.min.js'])

<div class="btn-group" role="group" aria-label="...">
    <a href="/plan/ack/{{mac}}" class="btn btn-default">Ack</a>
    <a href="/plan/edit/{{mac}}" class="btn btn-default">Edit</a>
    <a href="/plan/delete/{{mac}}" class="btn btn-default">Delete</a>
    <a href="/plan/history/{{mac}}" class="btn btn-default">History</a>
</div>
<hr/>

<div class="container" id="app">
    <div class="container">
        <div class="form-group">
            <label class="control-label">Client</label>
            <div>Last update: ${ timestamp }</div>
            <p>
                <td>
                    Rack ${rack} Location ${location} MAC {{ mac }}
                    <span v-bind:class="finished ? 'text-success' : 'text-warning'">${ finished ? '' : 'Not' } Finished</span>
                    ${ progress_text } - ${ progress_value }%
                    <div class="progress" style="width: 30em; margin: 0px;">
                        <div class="progress-bar" role="progressbar" v-bind:style="{width: progress_value + '%'}" v-bind:aria-valuenow="progress_value"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
            </p>
        </div>
        <div class="form-group">
            <label class="control-label" for="plan_content">Plan</label>
            <textarea class="form-control" name="plan_content" cols="80" rows="3" disabled>${plan_content}</textarea>
        </div>
        <div class="form-group">
            <label class="control-label" for="cfg_content">Cfg</label>
            <textarea class="form-control" name="cfg_content" cols="80" rows="3" disabled>${cfg_content}</textarea>
        </div>
    </div>

    <hr/>
    <div class="container">
        <table class="table table-condensed table-hover">
            <tbody>
                <template v-for="pxe in pxe_list">
                    <tr>
                        <th class="col-md-1">
                            ${ pxe.order } (${ pxe.count }/${ pxe.cycle })
                        </th>
                        <th class="col-md-4">
                            <a v-bind:href="'/cfg/view/' + pxe.pxe">${ pxe.pxe }</a>
                        </th>
                    </tr>
                    <tr v-for="cyc in pxe.log">
                        <td class="col-md-1">${ cyc.count }</td>
                        <td class="col-md-4">${ cyc.time }</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>

<script>
    var data = {
        rack: '',
        location: '',
        finished: null,
        progress_text: '',
        progress_value: 0,
        plan_content: '',
        cfg_content: '',
        pxe_list: [],
        timestamp: null
    }
    var app = new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data: data,
        computed: {
        },
        methods: {
        }
    });

    function set_plan(plan) {
        var d = new Date();
        app.timestamp = d.toString();
        // console.log(plan);
        app.rack = plan.client.rack;
        app.location = plan.client.location;
        app.finished = plan.finished;
        app.progress_text = plan.progress.text;
        app.progress_value = plan.progress.value;
        app.plan_content = plan.plan_content;
        app.cfg_content = plan.cfg_content;
        pxe_list = plan.pxe_list;
        while (app.pxe_list.length > 0) {
            app.pxe_list.pop();
        }
        for (var i = 0; i < pxe_list.length; i++) {
            app.pxe_list.push(pxe_list[i]);
        }
    }
    function update_status() {
        $.ajax({
            url: "/ajax/plan/view/{{ mac }}",
            success: function (result) {
                // console.log('update');
                set_plan(JSON.parse(result.plan));
            }
        });
    }
    update_status();
    var timer = setInterval(update_status, 2000);
</script>